<script setup lang="ts">
import router from "@/router"
import { onBeforeMount, onMounted, onUpdated, ref, watch } from "vue"
import { CommentApi, ContactApi, OrganizationApi } from "@/api/crm"
import type { CommentData } from "@/api/crm/types/comment"

defineOptions({
  name: "CommentDetail"
})

const CommentDetail = ref<CommentData>()
const canEdit = ref(true)
const loading = ref(true)
let id = router.currentRoute.value.query as { id: string }
// console.log(router.currentRoute.value)
// CommentApi.getCommentDetail(id).then(resp=>CommentDetail.value = resp.data)
// let resp = initPage()
// console.log(resp.data);
// CommentDetail.value = resp.data
// console.log(CommentDetail.value)

onMounted(async () => {
  // 获取要展示的id
  //   let id = router.currentRoute.value.query as { id: string }
  //   console.log(id);
  let resp = await CommentApi.getCommentDetail(id)
  // console.log(resp.data);
  CommentDetail.value = resp.data
  // console.log(CommentDetail.value)
  getContact(CommentDetail.value.contact_id!)
})
/** 获取联系人信息 */
const contactInfo = ref({
  name: "",
  id: ""
})
const getContact = async (id: string) => {
  let resp = await ContactApi.getContactDetail({ id })
  contactInfo.value = resp.data
}
/** 获取机构信息 */
const organizationInfo = ref({
  fullname: "",
  _id: ""
})
// const getOrganization = async () => {
//   let resp = await OrganizationApi.ge
// }
/**因为异步，vue不能保证Mounted阶段就获取数据，所以要加一个监听，并且下面用了v-if-else处理 */
watch(
  CommentDetail,
  () => {
    loading.value = false
  }
  //   { immediate: true }
)
</script>

<template>
  <div class="layout-container">
    <el-card>
      <!-- {{ CommentDetail }} -->
      <div v-if="loading">
        <el-skeleton :rows="3" animated />
      </div>
      <div class="body-form" v-else>
        <el-form :model="CommentDetail" label-width="90px">
          <el-form-item label="沟通主题：">
            <el-input v-model="CommentDetail!.subject" :readonly="canEdit"></el-input>
          </el-form-item>
          <el-form-item label="联系人：">
            <el-input v-model="contactInfo.name" :disabled="true"></el-input>
          </el-form-item>
          <!-- <el-form-item label="关联机构：">
            <el-input v-model="CommentDetail!.organization.fullname" :disabled="true"></el-input>
          </el-form-item> -->
          <el-form-item label="沟通日期：">
            <el-input v-model="CommentDetail!.date" :readonly="canEdit"></el-input>
          </el-form-item>
          <!-- <el-form-item label="沟通日期：">
            <el-input v-model="CommentDetail!.date" :readonly="canEdit"></el-input>
          </el-form-item> -->
          <el-form-item label="沟通内容：">
            <el-input v-model="CommentDetail!.content" :readonly="canEdit" type="textarea" :rows="6"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="card-footer">
        <el-button type="info" @click="canEdit = false">修改</el-button>
        <el-button type="primary">保存</el-button>
      </div>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>
.body-form {
  width: 60%;
  margin: 0 auto;
}
.card-footer {
  margin: 10px auto;
  display: flex;
  justify-content: center;
}
</style>
